
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>基于企业画像的价值挖掘</title>
  <link type="text/css" href="./css/public.css" rel="stylesheet">
  <link type="text/css" href="./css/icon.css" rel="stylesheet">
  <link type="text/css" href="./css/index.css" rel="stylesheet">
  <link type="text/css" href="./css/animate.min.css" rel="stylesheet">
  
<script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>

<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/area_echarts.js"></script>
</head>
<style>
.abc{ 

}

</style>

<body>
<div class="bg">
	<div class="title">基于企业画像的价值挖掘</div>
	<div class="topMain">
		<div class="topMain_left">
			<div class="topMain_leftIn">
				<h3>这里是标题</h3>
                <div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
                <script type="text/javascript">
					option = {
						title: {
							text: '数据情况统计',
							subtext: '',
							left: 'right',
							textStyle: {
								color: '#fff',
								fontSize: 12
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							// orient: 'vertical',
							// top: 'middle',
							type: 'scroll',
							orient: 'vertical',
							right: 10,
							top: 40,
							bottom: 20,
							left: 'right',
							data: ['西凉', '益州', '兖州', '荆州', '幽州'],
							textStyle: {
								color: '#fff',
								fontSize: 12
							}

						},
						grid:{
							x:'-10%',
							y:40,
							x2:20,
							y2:20,
						},
						color : [ '#09d0fb', '#f88cfb', '#95f8fe', '#f9f390',  '#ecfeb7' ],
						series: [
							{
								type: 'pie',
								radius: '65%',
								center: ['50%', '50%'],
								selectedMode: 'single',
								data: [
									{value: 1548, name: '幽州',
									
							},
									{value: 535, name: '荆州'},
									{value: 510, name: '兖州'},
									{value: 634, name: '益州'},
									{value: 735, name: '西凉'}
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
                //获取dom容器
								var myChart = echarts.init(document.getElementById('chartmain_bing'));
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
                
                </script>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
			</div>
		</div>
		<div class="topMain_right">
			<div class="topMain_rightIn">
				<div class="map">
					<div class="map1">
						<img src="images/lbx.png">
					</div>
					<div class="map2">
						<img src="images/jt.png">
					</div>
					<div class="map3">
						<img src="images/map.png">
					</div>
					<div class="map4" id="map_1"></div>
				</div>
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
			</div>
		</div>
	</div>
	<div class="bottomMain">
		
		<div class="bottomMain_middle">
			<div class="bottomMain_middleIn">
				
				<h3>这里是标题</h3>
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
                <script type="text/javascript">
				//window.onload = function () {
				//指定图表的配置项和数据
				var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
				var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
				var yMax = 500;
				var dataShadow = [];
				
				for (var i = 0; i < data.length; i++) {
					dataShadow.push(yMax);
				}
				
				option = {
					title: {
						text: '',
						subtext: ''
					},
					grid:{
						x:40,
						y:40,
						x2:20,
						y2:20,
						
					},
					xAxis: {
						data: dataAxis,
						axisLabel: {
							/*inside: true,*/
							interval:0,
							textStyle: {
								color: '#fff',
								fontSize: 12
								
							}
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: true,
							symbol:['none', 'arrow'],
							symbolOffset: 12,
							lineStyle:{
								color: '#fff',
							}
						},
						z: 10
					},
					yAxis: {
						type: 'value',
						name: '单位：元',
						axisLine: {
							show: true,
							symbol: ['none', 'arrow'],
							symbolOffset: 12,
							lineStyle:{
								color: '#fff',
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#fff',
								fontSize: 12
							}
						}
					},

					dataZoom: [
						{
							type: 'inside'
						}
					],
					series: [
						{ // For shadow
							type: 'bar',
							itemStyle: {
								color: 'rgba(0,0,0,0.05)'
							},
							barGap: '-100%',
							barCategoryGap: '40%',
							data: dataShadow,
							animation: false
						},
						{
							type: 'bar',
							itemStyle: {
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#0efdff'},
										{offset: 0.5, color: '#188df0'},
										{offset: 1, color: '#188df0'}
									]
								)
							},
							emphasis: {
								itemStyle: {
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[
											{offset: 0, color: '#2378f7'},
											{offset: 0.7, color: '#2378f7'},
											{offset: 1, color: '#0efdff'}
										]
									)
								}
							},
							data: data
						}
					]
				};
				
				// Enable data zoom when user click bar.
				/*var zoomSize = 6;
				myChart.on('click', function (params) {
					console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
					myChart.dispatchAction({
						type: 'dataZoom',
						startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
						endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
					});
				});*/
			
				//获取dom容器
				var myChart = echarts.init(document.getElementById('chartmain'));
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				//};
				</script>
				
                <span class="border_bg_leftTop"></span>
                <span class="border_bg_rightTop"></span>
                <span class="border_bg_leftBottom"></span>
                <span class="border_bg_rightBottom"></span>
			</div>
		</div>
	</div>
	
	
    <div style="clear:both;"></div>
</div>

</body>
</html>
